<!-- MAIN CONTENT -->

<div id="content">
    <div smart-include="sensor/views/sub-header.tpl.html"></div>
    <div>
        <label ng-repeat="port in ports">
            <button class="margin-left-10 btn" ng-class="{'selected':selected==port.port}" ng-bind="port.port" ng-click="get_someport(port.port)">{{port.port}}</button>
        </label>
    </div>
    <div class="clearfix">
        <div class="pull-left  margin-left-10">
            <strong class="font-md" style="vertical-align: middle;">项目：</strong>
            <label class="select">
                <select class="form-control" ng-model="paginationConf.projectid" ng-change="get_project(paginationConf.projectid)">
                    <option value="{{project.projectid}}" ng-repeat=" project in projects">{{project.proname}}</option>
                </select>
            </label>
        </div>
        <div class="pull-left  margin-left-10">
            <strong class="font-md" style="vertical-align: middle;">设备分组：</strong>
            <label class="select">
                <select class="form-control" ng-model="paginationConf.groupid" ng-change="send()">
                    <option value="">全部</option>
                    <option value="{{group.id}}" ng-repeat="group in groups">{{group.name}}</option>
                </select>
            </label>
        </div>
        <div class="pull-left margin-left-10 My_pc">
            <strong class="font-md" style="vertical-align: middle;">时间范围：</strong>
            <label class="input">
                <input type="text" class="lineHeight" name="startdate" id="startdate" placeholder="开始日期">

            </label>
            -
            <label class="input">
                <input type="text" class="lineHeight" name="finishdate" id="finishdate" placeholder="结束日期">

            </label>
            <a class="btn btn-primary" ng-click="send()">查询</a>
        </div>
    </div>
    <div id="exportable" class="table-responsive">
        <table class="table table-bordered table-hover no-margin font-sml table-striped sensor_table">
            <thead>
                <tr>
                    <th class="text-align-center" ng-repeat="i in DATA_name">{{i}}</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="data in datas">
                    <td class="text-align-center" ng-repeat="i in DATA">{{data[i]}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <!-- end widget content -->
    <div class="dt-toolbar-footer">
        <tm-pagination conf="paginationConf"></tm-pagination>
    </div>
    <div class="clearfix" style="background:#fafafa">
        <button class="btn btn-primary glyphicon glyphicon-export pull-right" ng-click="exportData()"> 导出</button>
    </div>
</div>

<script>
    var pagefunction = function () {
        // START AND FINISH DATE
        $('#startdate').datepicker({
            //dateFormat : 'dd.mm.yy',
            dateFormat: 'yy-mm-dd',
            prevText: '<i class="fa fa-chevron-left"></i>',
            nextText: '<i class="fa fa-chevron-right"></i>',
            monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],  
            dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],  
            dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],  
            dayNamesMin: ['日','一','二','三','四','五','六'],
            onSelect: function (selectedDate) {
                $('#finishdate').datepicker('option', 'minDate', selectedDate);
            }
        });
        $('#finishdate').datepicker({
            dateFormat: 'yy-mm-dd',
            prevText: '<i class="fa fa-chevron-left"></i>',
            nextText: '<i class="fa fa-chevron-right"></i>',
            monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],  
            dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],  
            dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],  
            dayNamesMin: ['日','一','二','三','四','五','六'],
            onSelect: function (selectedDate) {
                $('#startdate').datepicker('option', 'maxDate', selectedDate);
            }
        });

    };

    pagefunction();


</script>
<!-- END MAIN CONTENT -->
